{extend name="template/base_default"}
{block name="header"}


<!--<link rel="stylesheet" href="__CSS__/common.css">-->
<link rel="stylesheet" href="__CSS__/index.css">
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<link rel="stylesheet" href="__CSS__/weui.min.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>

    body{

        background:white
    }
    *{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
    }
    .container{
        max-width: 800px;
        margin: 0 auto;
        margin-top: -20px;
    }
    .slide{
        width: 100%;
        min-height: 180px;
        overflow: hidden;
        position: relative;

    }
    .slide .img{
        overflow: hidden;
        position: absolute;
        transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
    }
    .slide .img img{
        width: calc(100% - 14px);
        height: calc(100% - 14px);
        margin: 7px;
    }
    .slide .img1{
        width: 40%;
        height: 40%;
        top: 30%;
        left: -50%;
        z-index: 1;
    }
    .slide .img2{
        width: 60%;
        height: 60%;
        top: 20%;
        left: -20%;
        z-index: 2;
    }
    .slide .img3{
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        z-index: 3;
    }
    .slide .img4{
        width: 60%;
        height: 60%;
        top: 20%;
        left: 60%;
        z-index: 2;
    }
    .slide .img5{
        width: 40%;
        height: 40%;
        top: 30%;
        left: 110%;
        z-index: 1;
    }
    .slide-bt{
        position: absolute;
        left: 50%;
        bottom: 13%;
        z-index: 10;
    }
    .slide-bt span{
        width: 24px;
        height: 8px;
        background: #c9caca;
        float: left;
        margin: 5px;
        border-radius: 4px;
    }
    .slide .slide-bt .on{
        background: #ffd200;
    }
    button{
        width: 50px;
        margin: 20px;
    }
    .text-content{
        margin-top:10px;
        margin-left: 4%;
        width:44%;
        float: left;
        height:4rem;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .text-content img{
        width: 2rem;
        height: 2rem;
        margin-left: 15px;
        float: left;
    }
    .text-content .caption{
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: left;
        margin-left: .6rem;
        color: white;
    }
    .text-more{
        width:92%;
        margin-left: 4%;
        height:80px;
        margin-top: 16px;
        float: left;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 4px;


    }
    .text-more img{
        width:100%;


    }
    .button{
        float: left;
        width:100%;
        height:90px;
    }
    .nav_bar{
        height:62px;
        background-color: #121832;
        width:100%;
        color:white;
        position:fixed;
        bottom: 0;
        z-index: 9999;
    }
    .nav_bar ul{
        width:32%;
        float: left;
        text-align: center;
        color:blue;
        margin-top: 10px;
        color:white;
    }
    .nav_bar ul li img{
        width:16px;
        height:16px;
        color:white;
    }
    .swiper-container {

        width: 100%;
        margin-top: 20px;
    }
    {gt name="SCROLL_TEXT|count" value="1"}
    @keyframes scrollText {
    {volist name="SCROLL_TEXT" id="vo" key="key"}
    {$scroll_text_per*$key}%{transform: translateY(-{$key*2.0}rem);}
    {/volist}

    }
    {/gt}
    .swiper-container img {
        display: block;
        width: 100%;
    }
    .scroll-box {
        width: 96%;
        overflow: hidden;
        color: white;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;

    }
    .scroll-box span.title {
        font-size: .75rem;
        color: #787878;
        position:relative;
        top:0.2rem

    }
    .scroll-box img {
        width: 1rem;
        height: 1rem;
        position:relative;
        top:0.3rem
    }
    .scroll-box .scroll-text {
        position: relative;
        display: inline-block;
        width: 65%;
        height: 1.5rem;
        font-size: .75rem;
        border-radius: 4px;
        margin-left: 4%;
        overflow: hidden;
    }
    .scroll-text-border {
        top: 0;
        animation:scrollText {$scroll_time}s infinite  cubic-bezier(1,0,0.5,0) ;
    }
    .scroll-text-border:hover{
        animation-play-state:paused;
        -webkit-animation-play-state:paused;
    }
    .scroll-text-border div {
        height: 2.0rem;
        display: flex;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .scroll-text-border div span{
        line-height: 2.0rem;
        max-height: 2.0rem;
    }
    .searchbar{
        height:50px;
        margin-top:10px;
        width:80%;
        text-align: center;
        display:inline-block;
    }
    .search{
        margin-left: 4%;
        width:100%;
        float:left;
        margin-right: 18px;
        border-radius: 40px;
        background-color: white;
        height:36px;
        background-color: rgba(255, 255, 255, 0.2);
        margin-top: 16px;
        border: solid 1.5px #787878;
    }
    #shop-search{
        margin-top: 10px;
        width:20px;
        height:20px;
    }
    #shop-search img{
        width:20px;

    }
    input{
        border:none;
        font-size: 18px;
        outline:none;
        margin-top: 8px;
        color:#545454;
    }
    .item-box {
        width:100%;
        padding-top:10px;
        border-bottom: solid 1px #f2f3f8;
    }
    .item-box .item {
        width:25vw;
        height:25vw;
        background-color: white;
        float:left;
    }
    .item-box .item img{
        width: 40px;
        height:40px;
        margin:0 auto;
        margin-top: 10px;
        display:block;
    }
    .item-box .item .text {
        width:100%;
        text-align: center;
        font-weight:300;
        color:#787878;
        font-size:14px;
    }
    .call {
        width:36px;
        height:36px;
        float:right;
        margin-top: 26px;
        margin-right:10px;
    }
    .call img {
        width: 100%;
        height:100%;
    }
</style>
{/block}
{block name="body"}
    <div class="searchbar">
        <div class="search"><input type="text" id="shop-name" style="text-indent:2em;color:#787878;width:75%;background: none;float:left;" placeholder="请输入联盟商家"> <button id="shop-search" style="background: none;border: none;"><img src="__IMG__/sousuo.png"> </button></div>
    </div>
    <a href="tel:0411-66872666">
        <div class="call">
            <img src="__IMG__/dadianhua.png" />
        </div>
    </a>
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            {volist name="pics" id="pic"}

            {eq name="pic.url_type" value="6244"}
            <div class="swiper-slide">
                <a href="{:url('shop/shopdetail',array('seller_id'=>$pic.storeid))}">
                    <img style="height:180px" src="__API__/picture/index?id={$pic.img}" alt="pic1">
                </a>
            </div>

            {else/}
            <div class="swiper-slide">
                <img style="height:180px" src="__API__/picture/index?id={$pic.img}" alt="pic1">
            </div>
            {/eq}
            {/volist}
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="item-box">
        <div class="item">
            <img src="__IMG__/zhekoushangjia.png">
            <div class="text">折扣商家</div>
        </div>
        <div class="item">
            <img src="__IMG__/youcheyizu.png">
            <div class="text">有车一族</div>
        </div>
        <div class="item">
            <img src="__IMG__/weiyoushangcheng.png">
            <div class="text">唯优商城</div>
        </div>
        <div class="item">
            <img src="__IMG__/wodefuli.png">
            <div class="text">我的福利</div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="scroll-box">
        <div class="scroll-text">
            <div class="scroll-text-border">
                {volist name="SCROLL_TEXT" id="vo"}
                <div><span style="color:#787878">{$vo}</span></div>
                {/volist}
            </div>
        </div>
        <span class="title">超值活动</span><img src="__IMG__/xiaoxi1.png">
    </div>
    <div style="display:none">
        <a href="{:url('shop/shopCategory')}"><div class="text-content"><img src="__IMG__/index/shop.png"><div class="caption">联盟商家</div></div></a>
        <a href="{:url('insurance/cx')}"><div class="text-content"><img src="__IMG__/index/ycyz.png"><div class="caption">有车一族</div></div></a>
        <a href="{:url('shop/mall')}"><div class="text-content"><img src="__IMG__/index/sc.png"><div class="caption">唯优商城</div></div></a>
        <a href="{:url('staticpage/fh')}"><div class="text-content"><img src="__IMG__/index/zhangguizhijia.png"><div class="caption">掌柜之家</div></div></a>
        <a href="{:url('staticpage/index')}"><div class="text-more" style="margin-top: 10px;text-align: center;line-height: 80px;color: white">更多美好 </div></a>
    </div>


<div class="button"></div>
<script type="text/javascript" src="__JS__/public.js"></script>
<script type="text/javascript" src="__JS__/swiper.min.js"></script>
<script>
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction : false
    });

    $('#shop-search').click(function(){
        location.href=getBaseUrl()+'web.php/shop/shoplist?name='+$('#shop-name').val();
    });
</script>
{include file="template/nav_bar"}
{/block}